<!DOCTYPE html>
<html class="ui-page-login">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<link href="__STATIC__/css/style.css" rel="stylesheet" />
<!--<link href="../pubilc/iconfont/iconfont.css">-->
<style>
	.mui-bar-nav {
	top: 0;
	-webkit-box-shadow: 0 1px 6px #ccc;
	box-shadow: 0 1px 6px #ccc
}
.mui-bar{
	position:fixed;
	z-index: 10;
	right: 0;
	left: 0;
	height: 44px;
	padding-left: 10px;
	padding-right: 10px;
	border-bottom: 0;
	background-color: #F7F7F7;
	background: #f04e23;
	backface-visibility:hidden;
}
.mui-icon {
	font-family: Muiicons;
	font-size: 24px;
	font-weight: 400;
	font-style: normal;
	line-height: 1;
	display: inline-block;
	text-decoration: none;
	-webkit-font-smoothing: antialiased
}
.mui-pull-left {
	float: left;
}
.mui-icon-back:before,
.mui-icon-left-nav:before {
	content: '\e471'
}
.mui-input-group {
	position: relative;
	padding: 0;
	border: 0;
	background-color: #fff
}

.mui-content-padded {
	margin: 10px
}
.mui-bar .mui-icon{
	font-size: 24px;
	position:relative ;
	z-index: 20;
	padding-top: 10px;
	padding-bottom: 10px;
}
.mui-bar-nav~.mui-content .mui-anchor {
	display: block;
	visibility: hidden;
	height: 45px;
	margin-top: -45px
}

.mui-bar-nav.mui-bar .mui-icon {
	margin-right: -10px;
	margin-left: -10px;
	padding-right: 10px;
	padding-left: 10px;
	color: white;
}

.mui-title {
	font-size: 17px;
	font-weight: 500;
	line-height: 44px;
	position: absolute;
	display: block;
	width: 100%;
	margin: 0 -10px;
	padding: 0;
	text-align: center;
	white-space: nowrap;
	color: white;
}
.mui-bar .mui-title {
	right: 40px;
	left: 40px;
	display: inline-block;
	overflow: hidden;
	width: auto;
	margin: 0;
	text-overflow: ellipsis
}
.mui-title a {
	color: inherit
}

.mui-content {
	background-color: #efeff4;
	-webkit-overflow-scrolling: touch
}

.mui-bar-nav~.mui-content {
	padding-top: 44px
}

.mui-bar-nav~.mui-content.mui-scroll-wrapper .mui-scrollbar-vertical {
	top: 44px
}
.mui-input-group input:last-child {
	background-image: none
}
.mui-input-group:before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color: #c8c7cc
}
.mui-btn-block {
	font-size: 18px;
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 15px 0
}
.mui-btn-blue,
.mui-btn-primary,
input[type=submit] {
	color: #fff;
	border: 1px solid #f04e23;
	background-color: #f04e23;
}
input[type=color],
input[type=date],
input[type=datetime-local],
input[type=datetime],
input[type=email],
input[type=month],
input[type=number],
input[type=password],
input[type=search],
input[type=tel],
input[type=text],
input[type=time],
input[type=url],
input[type=week],
select,
textarea {
	width: 100%;
	padding: 10px 15px 10px 80px;
	-webkit-user-select: text;
	border: none;
	border-radius: 3px;
	outline: 0;
	background-color: #fff;
	-webkit-appearance: none;
	
}
.mui-input-group input,
.mui-input-group textarea {
	margin-bottom: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	-webkit-box-shadow: none;
	box-shadow: none;
}
.mui-input-row label~input,
	.mui-input-row label~select,
	.mui-input-row label~textarea {
		width: 78%;
		margin-bottom: 0;
		border: 0;
		height: 20px;
	}
.mui-input-row label {
	font-family: 'Helvetica Neue', Helvetica, sans-serif;
	line-height: 1.1;
	float: left;
	padding: 11px 15px;
	
}
.mui-input-row {
	position: relative;
	clear: left;
	overflow: hidden;
}


.area {
	margin: 20px auto 0px auto;
}
.mui-input-group:first-child { 
	margin-top: 20px;
}  
.mui-input-group label {
	width: 22%;
	position: absolute;
}
p {
	font-size: 14px;
	margin-top: 0;
	margin-bottom: 10px;
	color: #8f8f94
}
.mui-input-group .mui-input-row {
	height: 40px
}
.mui-input-group .mui-input-row:after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 15px;
	height: 1px;
	content: '';
	-webkit-transform: scaleY(.5);
	transform: scaleY(.5);
	background-color: #c8c7cc
}
.mui-checkbox input[type=checkbox],
.mui-radio input[type=radio] {
	top: 6px;
}
.mui-content-padded {
	margin-top: 25px;
}
.mui-btn {
	padding: 10px;
}
	
</style>
</head>

<body>
<header class="mui-bar mui-bar-nav">
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">注册源之东方商城</h1>
</header>
<div class="mui-content">
	<form class="mui-input-group" id="add_user">
		<div class="mui-input-row">
			<label>昵称</label>
			<input  name="username" id="username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
			<span id="pds" style="font-size: 12px; position: absolute;right: 20px;top: 8px;color: red;display: none;">帐号只能是数字或字母下划线中横线</span>
		</div>
		<div class="mui-input-row">
			<label>姓名</label>
			<input  name="surename" type="text" class="mui-input-clear mui-input" placeholder="请输入您的真实姓名" maxlength="4">
		</div>
		
		<div class="mui-input-row">
			<label>手机</label>
			<input  name="mobile" type="tel" id="phone" class="mui-input-clear mui-input" placeholder="请输入手机号" maxlength="11">
			<span id="mobile_span" style="font-size: 12px; position: absolute;right: 20px;top: 8px;color: red;display: none;">请输入未注册的手机号</span>
		</div>
		<div class="mui-input-row">
			<label>密码</label>
			<input name="password" id='password' type="password" class="mui-input-clear mui-input password" placeholder="8-16位数字和字母组合的密码" maxlength="16">
		</div>
		<div class="mui-input-row">
			<label>确认</label>
			<input name="re_password" id='password_confirm' type="password" class="mui-input-clear mui-input password" placeholder="请确认密码" maxlength="16" style="position: relative;"><span id="pd" style="font-size: 12px; position: absolute;right: 20px;top: 8px;color: red;display: none;">x 两次密码不一致</span>
		</div>
		<div class="mui-input-row">
			<label>qq</label>
			<input  name="qq" type="number" class="mui-input-clear mui-input" placeholder="请输入您的qq账号" maxlength="12">
		</div>
		<div class="mui-input-row">
			<label>邮箱</label>
			<input name="email" id='email' type="email" class="mui-input-clear mui-input" placeholder="请输入您的邮箱账号">
		</div>
		<div class="mui-input-row">
			<label>邀请码</label>
			<input name="code" id='code' type="text" class="mui-input-clear mui-input password" placeholder="请输入邀请码" maxlength="16" style="position: relative;">
		</div>
	</form>
	
	
	<div class="mui-content-padded">
		<button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
		<p style="text-align: center">备注:昵称长度在8到12位(数字/字母/点/下划线)</p>
		<p style="text-align: center">备注:手机号必须使用未注册手机号</p>
		<p style="text-align: center">备注:密码长度不可少于8位</p>
	</div>
</div>
<script src="__STATIC__/js/jquery-3.1.1.min.js"></script>
<script>
	//判断密码
	$('.password').blur(function() {
		
		if($('#password').val() == $('#password_confirm').val()  ){
			$('#pd').hide();
		}else{
			$('#pd').show();
		}
	});
	// 用户名
	$('#username').blur(function(){
	    var re = /^[0-9a-zA-Z\-\_\.]{5,12}$/;
		if(!re.test($('#username').val())){
			$('#pds').show();
			return false;
		}
        if($('#username').val()==''){
            $("#pds").hide();
            return false;
        }
		$.ajax({
			url: '/check_username',
			type : 'post',
			data: {username: $('#username').val()},
			cache: false,
			success: function (data) {
				if(data.status == 1) {
					$('#pds').hide();
				} else {
                    alert(data.message);
				}
			 }
		});
	});
	// 手机号
    $('input[name="mobile"]').blur(function(){
        if(!/^1[345789]\d{9}$/.test($('input[name="mobile"]').val())){
            $('#mobile_span').show();
            return false;
        }
        if($('input[name="mobile"]').val()==''){
            $("#mobile_span").hide();
            return false;
        }
		$.ajax({
			url: '/check_mobile',
			type : 'post',
			data: {mobile: $('input[name="mobile"]').val()},
			cache: false,
			success: function (data) {
                if(data.status == 1) {
                    $('#mobile_span').hide();
                } else {
                    alert(data.message);
				}
			}
		});
    });
	
	//提交
	$('#reg').click(function(){
		var reg= /^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&*]+$)(?![\d!@#$%^&*]+$)[a-zA-Z\d!@#$%^&*]+$/;
		if ($("#phone").val().length!=11) {
			alert("请输入11位手机号");
			return false;
		}
		//正则表达式，test检索input的值
		else if(!(/^1[345789]\d{9}$/.test($('#phone').val()))){
			alert("手机号码有误，请重填");  
       		return false;
		}
		if($('input').val() == "" ||$('input').val()==null){
			alert('请填写完整！');
			return false;
		}
		$.ajax({
			type : 'post',
			dataType : 'json',
			data : $('#add_user').serialize(),
			url : '/do_reg',
			async : true,
			success : function(data){
                if(data.status == 0) {
                	alert(data.message);
                }
                if(data.status == 1) {
                    window.location.href = '/myself';
                }
			},
			error:function(e){
				//异常处理；
                var error = e.responseJSON.msg;
                var arr = Object.values(error);
                alert(arr);
			}
		});             
	})
	
</script>
</body>

</html>